<template>
  <div class="ms">
    <van-nav-bar
      style="background-color:#fbfafb"
      title="标题"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >

      <template #right>
        <van-icon name="ellipsis" color="#666" size="24" />
      </template>
    </van-nav-bar>
    <div class="fixedh">
      <van-tabs swipeable v-model="active">
        <van-tab v-for="item in tab_time" :key="item.id">
          <template #title>
            <div @click="onClick(item.pid)">
              <em :class="[item.active==1?'active':'']">{{item.tab_time}}</em>
              <div class="stats" :class="[item.active==1?'stats active':'']">
                {{
                item.active==5?'昨日精选':
                item.active==2?'抢购中':
                item.active==1?'抢购中':
                item.active==3?'即将开始':
                item.active==1?'抢购中':'明日预告'
                }}
              </div>
            </div>
          </template>

          <div class="ms-list-cd">
            <div class="cd">
              <van-count-down :time="times">
                <template v-slot="timeData">
                  <span class="end">{{active_tab_time>= tab_times?'距离本场结束':'距离本场开始'}}</span>
                  <span
                    class="block"
                  >{{ timeData.hours = 10 > timeData.hours ? '0' + timeData.hours:timeData.hours}}</span>
                  <span class="colon">:</span>
                  <span
                    class="block"
                  >{{ timeData.minutes = 10 > timeData.minutes ?'0'+timeData.minutes:timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span
                    class="block"
                  >{{ timeData.seconds = 10 > timeData.seconds ? '0'+timeData.seconds:timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
            <div class="in" v-for=" (item_list) in item_list" :key="item_list.item_id">
              <a href="#">
                <div class="lt">
                  <img :src="item_list.pic" alt />
                </div>
                <div class="rt">
                  <p class="tit">{{item_list.title}}</p>
                  <p class="desc">{{item_list.short_info}}</p>
                  <div class="tag">
                    <span>全球购</span>
                  </div>
                  <div class="price">
                    <p class="sp">
                      <b>{{item_list.active_price}}</b>
                    </p>
                    <p class="mp">
                      <del>{{item_list.market_price}}</del>
                    </p>
                    <!-- <div class="gsh-mark noself">非自营</div> -->
                  </div>

                  <div class="progress">
                    <div class="bar">
                      <i data-width="70%" style="width: 70%;"></i>
                    </div>
                    <div class="status status-normal" data-num="70%"></div>
                  </div>
                  <div class="side">
                    <van-button round type="info" style="font-size:12px" size="normal">立即秒杀</van-button>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, Toast, NavBar, CountDown, Button } from "vant";
import axios from "axios";
import { get } from "utils/http";
import BScroll from "better-scroll";
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(NavBar);
Vue.use(CountDown);
export default {
  data() {
    return {
      tab_time: "",
      p_id: "",
      active_tab_time: null,
      tab_times: null,
      times: null,
      active: null,
      item_list: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    },
    onClick(item) {
      // console.log(item);
      axios({
        url: `https://m.miabaobei.com/instant/seckill/seckillPromotionItem/${item}/1`
      }).then(res => {
        console.log(res)
        this.item_list = res.data.item_list;
        let pid = JSON.parse(res.request.responseText);
        let date = new Date();
        let s_time =
          pid.p_info.start_time.split(" ")[0] +
          " " +
          date.toLocaleString("chinese", { hour12: false }).split(" ")[1];
        let end_time = Date.parse(pid.p_info.end_time);
        let start_time = Date.parse(pid.p_info.start_time);
        let s_time_parse = Date.parse(s_time);
        let rest_time =
          end_time -
          start_time -
          (end_time - start_time - (end_time - s_time_parse));
        this.tab_times = end_time;
        this.times = rest_time;
      });
    }
  },

  beforeCreate() {
    axios({
      url: "https://m.miabaobei.com/instant/seckill/seckillPromotionInfo/2"
    }).then(res => {
      res.data.forEach((element, index) => {
        if (element.active == 1) {
          this.active = index;
        }
      });
      this.tab_time = res.data;
    });
  },
  async created() {
    let p_id = this.$route.params.id;
    const pid = await get({
      url: `/instant/seckill/seckillPromotionItem/${p_id}/1`,
      params: {
        token: ""
      }
    });
    this.item_list = pid.item_list;
    let date = new Date();
    let s_time =
      pid.p_info.start_time.split(" ")[0] +
      " " +
      date.toLocaleString("chinese", { hour12: false }).split(" ")[1];
    let end_time = Date.parse(pid.p_info.end_time);
    let start_time = Date.parse(pid.p_info.start_time);
    let s_time_parse = Date.parse(s_time);
    let rest_time =
      end_time -
      start_time -
      (end_time - start_time - (end_time - s_time_parse));
    this.active_tab_time = end_time;
    this.times = rest_time;
  },
  mounted() {
    this.bscroll = new BScroll(".fixedh", {
      scrollY: true,
      momentum: true,
      probeType: 3,
      click: true,
      tap: true
    });
    this.bscroll.on("scroll", y => {
      let op = parseInt(y.y * -1);
      op = op / 100 >= 1 ? (op = 1) : op / 100;
      this.opacity = op;
    });
  }
};
</script>

<style lang="stylus" scoped>
div.ms {
  height: 100%;
}

em {
  width: 0.5rem;
  height: 0.2rem;
  line-height: 0.2rem;
  display: block;
  text-align: center;
  color: #333;
  font-size: 0.16rem;
  margin-top: 0.1rem;
  // background: #ea4241;
  border-radius: 0.5rem;
}

em.active {
  color: #fff;
  background: #ea4241;
}

.stats {
  font-size: 0.1rem;
  text-align: center;
  color: #cccccc;
  margin-bottom: 0.1rem;
}

.stats.active {
  font-size: 0.1rem;
  text-align: center;
  color: #ea4241;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}

.van-icon {
  color: #cccccc !important;
}

.fixedh {
  height: 6.2rem;
  overflow: hidden;
}

.ms-list-cd {
  height: 100%;
}

.cd {
  width: 100%;
  display: flex;
  padding-left: 0.2rem;
  height: 0.4rem;
  justify-content: flex-start;
  align-items: center;
  background-color: #f9f8f8;

  .end {
    margin-right: 0.1rem;
  }
}

.in {
  margin-left: 0.15rem;
  padding: 0.2rem 0.1rem 0.1rem 0;
  border-bottom: 1px solid #d7d7d7;

  .lt {
    float: left;
    margin-right: 0.1rem;
    width: 1rem;
    height: 1rem;
    background-color: #f2f2f2;

    img {
      width: 100%;
    }
  }

  .rt {
    position: relative;
    overflow: hidden;

    // min-height: 3.1733rem;
    .tit {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 1.25;
      font-size: 0.15rem;
      color: #222;
    }

    .desc {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      // margin-bottom: .0667rem;
      font-size: 0.13467rem;
      color: #999;
    }

    .tag {
      font-size: 0.12933rem;
      color: #52b1f6;
      line-height: 1;
      overflow: hidden;

      span {
        float: left;
        margin-bottom: 0.1067rem;
      }
    }

    .price {
      margin-top: 0.1rem;
      display: flex;
      line-height: 1;

      .sp {
        margin-right: 5px;
        color: #ea4141;

        b {
          // margin-left: .1067rem;
          font-style: normal;
          font-size: 0.16rem;
        }

        b:before {
          content: '¥';
          font-size: 0.13733rem;
        }
      }

      .mp {
        margin-top: 0.0667rem;
        font-size: 0.11rem;
        color: #999;

        del {
          text-decoration: line-through;
        }
      }

      .mp:before {
        content: '¥';
        font-size: 0.13733rem;
      }
    }

    .side {
      position: absolute;
      right: 0;
      bottom: 0;
      // font-size: .32rem;
      color: #52b1f6;
      text-align: right;

      button {
        background-color: #EA4141;
        border-color: #EA4141;
        // height 70%
        height: 0.33rem;
      }
    }

    .progress {
      width: 1.05rem;
      height: 0.1733rem;
      border: 1px solid #ff5e77;
      background-color: #FFDDDD;
      margin-top: 0.05rem;
      border-radius: 0.6667rem;

      .bar {
        border-radius: 0.2667rem;
        overflow: hidden;
        width: 100%;
        height: 100%;

        >i {
          display: block;
          height: 100%;
          background-color: #FE6E6E;
          border-radius: 0.2667rem;
          width: 0;
          -webkit-transition: width 1s ease;
          -moz-transition: width 1s ease;
          transition: width 1s ease;
        }
      }

      .status-normal {
        text-align: center;
        line-height: 0.3733rem;
        font-size: 0.2667rem;
        color: #fff;
      }

      .status-normal:after {
        content: '已售' attr(data-num);
        position: absolute;
        left: 50%;
        margin-left: -70px;
        /* text-align: center; */
        bottom: -10px;
        font-size: 10px;
      }
    }
  }
}
</style>